<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8" />
        <!-- 响应式bootstrap 4聊天网站 -->
        <!-- <title>Chat | Chatvia - Responsive Bootstrap 4 Chat App</title> -->
        <title>欢迎访问TalkBer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="Responsive Bootstrap 4 Chat App" name="description" />
        <meta content="Themesbrand" name="author" />
        <!-- App favicon -->
        <!-- <link rel="shortcut icon" href="assets/images/favicon.ico"> -->
        <link rel="stylesheet" href="assets/css/tools.css">
        <!-- 所有script均在底部引入 -->
        <!-- magnific-popup css -->
        <link href="assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css" />
        <!-- owl.carousel css -->
        <link rel="stylesheet" href="assets/libs/owl.carousel/assets/owl.carousel.min.css">
        <link rel="stylesheet" href="assets/libs/owl.carousel/assets/owl.theme.default.min.css">
        <!-- Bootstrap Css -->
        <link href="assets/css/bootstrap-dark.min.css" id="bootstrap-dark-style" rel="stylesheet" type="text/css" />
        <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
        <!-- Icons Css -->
        <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
        <!-- App Css-->
        <link href="assets/css/app-dark.min.css" id="app-dark-style" rel="stylesheet" type="text/css" />
        <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
        <!-- emoij.css -->
        <link rel="stylesheet" href="assets/css/emojibg.css">

    </head>
    <body>

        <!-- 所有的部件都在此div中 -->
        <div class="layout-wrapper d-lg-flex">

            <!-- 左边导航栏-开始 -->
            <div class="side-menu flex-lg-column mr-lg-1">
                <!-- LOGO -->
                <div class="navbar-brand-box">
                    <!-- 白天模式logo -->
                    <a href="index.html" class="logo logo-dark">
                        <span class="logo-sm">
                            <img src="image/logo.png" alt="" height="100" width="200" style="margin-left:-55px">
                        </span>
                    </a>
                    <!-- 夜晚模式logo -->
                    <a href="index.html" class="logo logo-light">
                        <span class="logo-sm">
                            <img src="image/logo-dark.png" alt="" height="100" width="200" style="margin-left:-55px">
                        </span>
                    </a>
                </div>
                <!-- Logo-end-->

                <!-- 导航栏可选项-开始 -->
                <div class="flex-lg-column my-auto">
                    <ul class="nav nav-pills side-menu-nav justify-content-center" role="tablist">
                        <li class="nav-item" data-toggle="tooltip" data-trigger="hover" data-placement="top" title="简介">
                            <a class="nav-link" id="pills-user-tab" data-toggle="pill" href="#pills-user" role="tab">
                                <i class="ri-user-2-line"></i>
                            </a>
                        </li>
                        <li class="nav-item" data-toggle="tooltip" data-trigger="hover" data-placement="top" title="聊天">
                            <a class="nav-link" id="pills-chat-tab" data-toggle="pill" href="#pills-chat" role="tab">
                                <i class="ri-message-3-line"></i>
                            </a>
                        </li>
                        <li class="nav-item" data-toggle="tooltip" data-trigger="hover" data-placement="top" title="群聊">
                            <a class="nav-link" id="pills-groups-tab" data-toggle="pill" href="#pills-groups" role="tab">
                                <i class="ri-group-line"></i>
                            </a>
                        </li>
                        <li class="nav-item" data-toggle="tooltip" data-trigger="hover" data-placement="top" title="联系人">
                            <a class="nav-link active" id="pills-contacts-tab" data-toggle="pill" href="#pills-contacts" role="tab">
                                <i class="ri-contacts-line"></i>
                            </a>
                        </li>
                        <li class="nav-item" data-toggle="tooltip" data-trigger="hover" data-placement="top" title="设置">
                            <a class="nav-link" id="pills-setting-tab" data-toggle="pill" href="#pills-setting" role="tab">
                                <i class="ri-settings-2-line"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 导航栏可选项-结束 -->

                <!-- 用户菜单栏-开始 -->
                <div class="flex-lg-column d-none d-lg-block">
                    <ul class="nav side-menu-nav justify-content-center">
                        <!-- 切换黑夜白昼模式 -->
                        <li class="nav-item">
                            <a class="nav-link" id="light-dark" href="#" data-toggle="tooltip" data-trigger="hover" data-placement="right" title="白昼 / 黑夜 模式">
                                <i class="ri-sun-line theme-mode-icon"></i>
                            </a>
                        </li>
                        <!-- 左下角用户头像操作 -->
                        <li class="nav-item btn-group dropup profile-user-dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <!-- 用户头像 -->
                                <img th:src="${session.user.userAvatar}" alt="用户头像" class="profile-user rounded-circle userImg">
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">常见问题 <i class="ri-profile-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">在线咨询<i class="ri-settings-3-line float-right text-muted"></i></a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="/logout">退出登录 <i class="ri-logout-circle-r-line float-right text-muted"></i></a>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 用户菜单栏-结束 -->
            </div>
            <!-- 左边导航栏结束 -->

            <!-- 聊天侧边栏开始 -->
            <div class="chat-leftsidebar mr-lg-1">

                <!-- 按钮内容开始 -->
                <div class="tab-content">
                    <!-- 个人资料简介点击开始 -->
                    <div class="tab-pane" id="pills-user" role="tabpanel" aria-labelledby="pills-user-tab">
                        <!-- Start profile content -->
                        <div>
                            <div class="px-4 pt-4">
                                <div class="user-chat-nav float-right">
                                    <div class="dropdown">
                                        <a href="javascript: void(0);" class="font-size-18 text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="ri-more-2-fill"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <!-- 点击按钮进入设置窗口 -->
                                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#updateModal">编辑
                                                <i class="ri-edit-fill mr-1 float-right"></i>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="/logout">退出
                                                <i class="ri-logout-circle-r-line float-right text-muted"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <h4 class="mb-0">我的个人信息</h4>
                            </div>

                            <div class="text-center p-4 border-bottom">
                                <div class="mb-4">
                                    <!-- 个人头像 -->
                                    <img th:src="${session.user.userAvatar}" class="rounded-circle avatar-lg img-thumbnail userImg" alt="用户头像">
                                </div>

                                <h5 class="font-size-16 mb-1 text-truncate" th:text="${session.user.nickname}"></h5>
                                <p class="text-muted text-truncate mb-1">
                                    <!-- 在线的图标,在线text-success,离线text-danger,繁忙text-warning -->
                                    <i class="ri-record-circle-fill font-size-10 text-success mr-1 d-inline-block" th:if="${session.user.status} eq 1"></i>
                                    <i class="ri-record-circle-fill font-size-10 text-warning mr-1 d-inline-block" th:if="${session.user.status} eq 2"></i>
                                    <i class="ri-record-circle-fill font-size-10 text-danger mr-1 d-inline-block" th:if="${session.user.status} eq 3"></i>
                                    <span th:if="${session.user.status} eq 1">在线</span>
                                    <span th:if="${session.user.status} eq 2">繁忙</span>
                                    <span th:if="${session.user.status} eq 3">离线</span>
                                </p>
                            </div>
      

                            <!-- 用户信息介绍-开始 -->
                            <div class="p-4 user-profile-desc" data-simplebar>
                                <div class="text-muted">
                                    <p class="mb-4" th:text="${session.user.desc}"></p>
                                </div>


                                <div id="profile-user-accordion-1" class="custom-accordion">
                                    <div class="card shadow-none border mb-2">
                                        <a href="#profile-user-collapseOne" class="text-dark" data-toggle="collapse"
                                                        aria-expanded="true"
                                                        aria-controls="profile-user-collapseOne">
                                            <div class="card-header" id="profile-user-headingOne">
                                                <h5 class="font-size-14 m-0">
                                                    <i class="ri-user-2-line mr-2 align-middle d-inline-block"></i> 关于
                                                    <!-- 箭头图标 -->
                                                    <i class="mdi mdi-chevron-up float-right accor-plus-icon"></i>
                                                </h5>
                                            </div>
                                        </a>

                                        <div id="profile-user-collapseOne" class="collapse show"
                                                aria-labelledby="profile-user-headingOne" data-parent="#profile-user-accordion-1">
                                            <div class="card-body">
                                                <!-- 用户的所有信息 -->
                                                <div>
                                                    <p class="text-muted mb-1">昵称</p>
                                                    <!-- 用户昵称 -->
                                                    <h5 class="font-size-14" th:text="${session.user.nickname}"></h5>
                                                </div>

                                                <div class="mt-4">
                                                    <p class="text-muted mb-1">邮箱</p>
                                                    <!-- 用户邮箱 -->
                                                    <h5 class="font-size-14" th:text="${session.user.email}"></h5>
                                                </div>

                                                <div class="mt-4">
                                                    <p class="text-muted mb-1">上次登录时间</p>
                                                    <!-- 用户上回登录时间 -->
                                                    <h5 class="font-size-14" th:text="${#dates.format(session.user.lastLoginTime,'yyyy年MM月dd日 HH:mm:ss')}"></h5>
                                                </div>

                                                <div class="mt-4">
                                                    <p class="text-muted mb-1">居住地</p>
                                                    <!-- 用户的居住地 -->
                                                    <h5 class="font-size-14 mb-0" th:text="${session.user.address}"></h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End About card -->

                                </div>
                                <!-- end profile-user-accordion -->

                            </div>
                            <!-- end user-profile-desc -->
                        </div>
                        <!-- End profile content -->
                    </div>
                    <!-- 个人资料简介点击结束 -->

                    <!-- 聊天按钮点击开始 -->
                    <div class="tab-pane" id="pills-chat" role="tabpanel" aria-labelledby="pills-chat-tab">
                        <!-- Start chats content -->
                        <div>
                            <div class="px-4 pt-4">
                                <h4 class="mb-4">聊天</h4>
                                <div class="search-box chat-search-box">
                                    <div class="input-group mb-3 bg-light  input-group-lg rounded-lg">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-link text-muted pr-1 text-decoration-none" type="button">
                                                <i class="ri-search-line search-icon font-size-18"></i>
                                            </button>
                                        </div>
                                        <!-- 搜索框 -->
                                        <input type="text" class="form-control bg-light" placeholder="搜索好友或聊天内容">
                                    </div> 
                                </div> <!-- Search Box-->
                            </div> <!-- .p-4 -->
    
                            <!-- 最近登录好友 -->
                            <div class="px-4 pb-4" dir="ltr">

                                <div class="owl-carousel owl-theme" id="user-status-carousel">
                                    <div class="item">
                                        <a href="#" class="user-status-box">
                                            <div class="avatar-xs mx-auto d-block chat-user-img online">
                                                <!-- 其他用户头像 -->
                                                <img src="/image/default.jpeg" alt="user-img" class="img-fluid rounded-circle">
                                                <!-- 用户下方的那个绿点 -->
                                                <span class="user-status"></span>
                                            </div>
                                            <!-- 其他用户昵称-->
                                            <h5 class="font-size-13 text-truncate mt-3 mb-1">最近无人登录哦</h5>
                                        </a>
                                    </div>
                                
                                    <!-- <div class="item">
                                        <a href="#" class="user-status-box">
                                            <div class="avatar-xs mx-auto d-block chat-user-img online">
                                                 当用户没有头像时显示昵称首字母大写 
                                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                    T
                                                </span>
                                                <span class="user-status"></span>
                                            </div>
                                            <h5 class="font-size-13 text-truncate mt-3 mb-1">Teresa</h5>
                                        </a>
                                    </div> -->
            
                                </div>
                                <!-- end user status carousel -->
                            </div>
                            <!-- end user status -->

                            <!-- 聊天的所有小窗口-->
                            <div class="px-2">
                                <h5 class="mb-3 px-3 font-size-16">最近</h5>

                                <div class="chat-message-list" data-simplebar>
            
                                    <ul class="list-unstyled chat-list chat-user-list">
                                        <!-- 开启的好友窗口 -->
                                    </ul>
                                </div>
        
                            </div>
                            <!-- End chat-message-list -->
                        </div>
                        <!-- Start chats content -->
                    </div>
                    <!-- 聊天按钮点击结束 -->
                    
                    <!-- 群聊按钮点击-开始 -->
                    <div class="tab-pane " id="pills-groups" role="tabpanel" aria-labelledby="pills-groups-tab">
                        <!-- Start Groups content -->
                        <div>
                            <div class="p-4">
                                <div class="user-chat-nav float-right">
                                    
                                    <div  data-toggle="tooltip" data-placement="bottom" title="创建群聊">
                                        <!-- 点击此创建群聊 , bootstrap4模态框-->
                                        <button type="button" class="btn btn-link text-decoration-none text-muted font-size-18 py-0" data-toggle="modal" data-target="#addgroup-exampleModal">
                                            <i class="ri-group-line mr-1"></i>
                                        </button>
                                    </div>
            
                                </div>
                                <h4 class="mb-4">群聊</h4>
        
                                <!-- 创建群聊窗口开始 -->
                                <div class="modal fade" id="addgroup-exampleModal" tabindex="-1" role="dialog" aria-labelledby="addgroup-exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title font-size-16" id="addgroup-exampleModalLabel">创建一个新群聊</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                </div>
                                            <div class="modal-body p-4">
                                                <form>
                                                    <div class="form-group mb-4">
                                                        <label for="addgroupname-input">群聊名称</label>
                                                        <input type="text" class="form-control" id="addgroupname-input" placeholder="输入群聊名">
                                                    </div>
                                                    <div class="form-group mb-4">
                                                        <label>群聊成员</label>
                                                        <div class="mb-3">
                                                            <button class="btn btn-light btn-sm" type="button" data-toggle="collapse" data-target="#groupmembercollapse" aria-expanded="false" aria-controls="groupmembercollapse">
                                                                挑选成员
                                                            </button>
                                                        </div>

                                                        <!-- 挑选好友组件群聊窗口 -->
                                                        <div class="collapse" id="groupmembercollapse">
                                                            <div class="card border">
                                                                <div class="card-header">
                                                                    <h5 class="font-size-15 mb-0">联系人</h5>
                                                                </div>
                                                                <div class="card-body p-2">
                                                                    <div data-simplebar style="max-height: 150px;">
                                                                        <!-- 存放创建群聊中的所有认识好友 -->
                                                                        <div>
                                                                            <!-- 以A字母开头 -->
                                                                            <div class="p-3 font-weight-bold text-primary">
                                                                                A
                                                                            </div>
    
                                                                            <ul class="list-unstyled contact-list">
                                                                                <li>
                                                                                    <div class="custom-control custom-checkbox">
                                                                                        <input type="checkbox" class="custom-control-input" id="memberCheck1" checked>
                                                                                        <label class="custom-control-label" for="memberCheck1">阿光</label>
                                                                                    </div>
                                                                                </li>
    
                                                                                <li>
                                                                                    <div class="custom-control custom-checkbox">
                                                                                        <input type="checkbox" class="custom-control-input" id="memberCheck2">
                                                                                        <label class="custom-control-label" for="memberCheck2">阿狗</label>
                                                                                    </div>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="addgroupdescription-input">群聊简介</label>
                                                        <textarea class="form-control" id="addgroupdescription-input" rows="3" placeholder="描述一下这个群聊吧~"></textarea>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-link" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-primary">创建</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 创建群聊窗口结束 -->

                                <!-- 搜索框-开始 -->
                                <div class="search-box chat-search-box">
                                    <div class="input-group bg-light  input-group-lg rounded-lg">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-link text-decoration-none text-muted pr-1" type="button">
                                                <i class="ri-search-line search-icon font-size-18"></i>
                                            </button>
                                        </div>
                                        <input type="text" class="form-control bg-light" placeholder="搜索群聊...">
                                    </div>
                                </div>
                                <!-- 搜索框-结束 -->
                            </div>

                            <!-- 所有群聊列表开始 -->
                            <div class="p-4 chat-message-list chat-group-list" data-simplebar>
                                <ul class="list-unstyled chat-list">
                                    <li>
                                        <a href="#">
                                            <div class="media align-items-center">
                                                <div class="chat-user-img mr-3">
                                                    <div class="avatar-xs">
                                                        <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                            R
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="media-body overflow-hidden">
                                                    <h5 class="text-truncate font-size-14 mb-0">#Reporting <span class="badge badge-soft-danger badge-pill float-right">+23</span></h5>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <div class="media align-items-center">
                                                <div class="chat-user-img mr-3">
                                                    <div class="avatar-xs">
                                                        <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                            D
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="media-body overflow-hidden">
                                                    <h5 class="text-truncate font-size-14 mb-0">#Designers</h5>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <div class="media align-items-center">
                                                <div class="chat-user-img mr-3">
                                                    <div class="avatar-xs">
                                                        <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                            D
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="media-body overflow-hidden">
                                                    <h5 class="text-truncate font-size-14 mb-0">#Developers <span class="badge badge-soft-danger badge-pill float-right">New</span></h5>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!-- 所有群聊列表结束 -->
                        </div>
                        <!-- End Groups content -->
                    </div>
                    <!-- 群聊按钮点击-结束 -->

                    <!-- 联系人按钮点击-开始 -->
                    <div class="tab-pane  fade show active" id="pills-contacts" role="tabpanel" aria-labelledby="pills-contacts-tab">
                        <!-- Start Contact content -->
                        <div>
                            <!-- start p-4 -->
                            <div class="p-4">
                                <div class="user-chat-nav float-right">
                                    <div data-toggle="tooltip" data-placement="bottom" title="添加好友">
                                        <!-- Button trigger modal -->
                                        <button type="button" class="btn btn-link text-decoration-none text-muted font-size-18 py-0" data-toggle="modal" data-target="#addContact-exampleModal">
                                            <i class="ri-user-add-line"></i>
                                        </button>
                                    </div>
                                </div>
                                <h4 class="mb-4">联系人</h4>

                                <!-- 好友申请-开始 -->
                                <div class="modal fade" id="addContact-exampleModal" tabindex="-1" role="dialog" aria-labelledby="addContact-exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title font-size-16" id="addContact-exampleModalLabel">添加好友</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body p-4">
                                                <form>
                                                    <div class="form-group mb-4">
                                                        <label for="addcontactemail-input">邮箱</label>
                                                        <input type="email" class="form-control" id="addcontactemail-input" placeholder="输入对方邮箱">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="addcontact-invitemessage-input">请输入验证信息</label>
                                                        <textarea class="form-control" id="addcontact-invitemessage-input" rows="3" placeholder="我是..."></textarea>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-link" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-primary" id="addfriend-btn">发送申请</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 好友申请-结束 -->

                                <!-- 搜索好友框-开始 -->
                                <div class="search-box chat-search-box">
                                    <div class="input-group bg-light  input-group-lg rounded-lg">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-link text-decoration-none text-muted pr-1" type="button">
                                                <i class="ri-search-line search-icon font-size-18"></i>
                                            </button>
                                        </div>
                                        <input type="text" class="form-control bg-light " placeholder="搜索好友..">
                                    </div>
                                </div>
                                <!-- 搜索好友框-结束 -->
                            </div>
                            <!-- end p-4 -->

                            <!-- 所有联系人列表-开始 -->
                            <div class="p-4 chat-message-list chat-group-list" data-simplebar>
        
                                <div class="mt-3">

                                    <ul class="list-unstyled contact-list">

                                        <li th:each="friend : ${session.friends}">
                                            <input type="hidden" th:value="${friend.uuid}" id="fuuid"/>
                                            <input type="hidden" th:value="${friend.email}" id="femail"/>
                                            <input type="hidden" th:value="${friend.nickname}" id="fnickname"/>
                                            <input type="hidden" th:value="${friend.desc}" id="fdesc"/>
                                            <input type="hidden" th:value="${friend.address}" id="faddress"/>
                                            <input type="hidden" th:value="${friend.status}" id="fstatus"/>
                                            <input type="hidden" th:value="${friend.userAvatar}" id="fuserAvatar"/>
                                            <input type="hidden" th:value="${friend.lastLoginTime}" id="flastLoginTime"/>
                                            <div class="media align-items-center">
                                                <div class="media-body">
                                                    <h5 class="font-size-14 m-0" th:text="${friend.nickname}"></h5>
                                                </div>
                                                <div class="dropdown">
                                                    <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="ri-more-2-fill"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-right">
                                                        <a class="dropdown-item" href="#">分享 <i class="ri-share-line float-right text-muted"></i></a>
                                                        <a class="dropdown-item" href="#">拉黑 <i class="ri-forbid-line float-right text-muted"></i></a>
                                                        <a class="dropdown-item" href="#">删除 <i class="ri-delete-bin-line float-right text-muted"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                            <!-- 所有联系人列表-结束 -->
                        </div>
                        <!-- Start Contact content -->
                    </div>
                    <!-- 联系人按钮点击-结束 -->
                    
                    <!-- 设置  按钮点击开始 -->
                    <div class="tab-pane" id="pills-setting" role="tabpanel" aria-labelledby="pills-setting-tab">
                        <!-- Start Settings content -->
                        <div>
                            <div class="px-4 pt-4">
                                <h4 class="mb-0">设置</h4>
                            </div>

                            <div class="text-center border-bottom p-4">
                                <div class="mb-4 profile-user">
                                    <!-- 个人头像 -->
                                    <img th:src="${session.user.userAvatar}" class="rounded-circle avatar-lg img-thumbnail userImg"  alt="">
                                    <!-- 修改按钮，点击此按钮修改头像 -->
                                    <button type="button" class="btn bg-light avatar-xs p-0 rounded-circle profile-photo-edit" id="upload-img-btn" data-toggle="tooltip" data-placement="right" title="修改头像">
                                        <i class="ri-pencil-fill"></i>
                                    </button>
                                    <input type="file" name="file" id="uploadImg" onchange="postImgData()" style="visibility: hidden;position: absolute" />
                                </div>

                                <!-- 个人用户名 -->
                                <h5 class="font-size-16 mb-1 text-truncate" th:text="${session.user.nickname}"></h5>
                                <div class="dropdown d-inline-block mb-1">
                                    <!-- text-success属性在线，text-warning属性繁忙,text-danger离线 -->
                                    <i class="ri-record-circle-fill font-size-10 text-success mr-1 d-inline-block" th:if="${session.user.status} eq 1"></i>
                                    <i class="ri-record-circle-fill font-size-10 text-warning mr-1 d-inline-block" th:if="${session.user.status} eq 2"></i>
                                    <i class="ri-record-circle-fill font-size-10 text-danger mr-1 d-inline-block" th:if="${session.user.status} eq 3"></i>

                                    <a class="text-muted dropdown-toggle pb-1 d-inline-block" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span th:if="${session.user.status} eq 1">在线</span>
                                        <span th:if="${session.user.status} eq 2">繁忙</span>
                                        <span th:if="${session.user.status} eq 3">离线</span>
                                        <i class="mdi mdi-chevron-down"></i>
                                    </a>
                                    
                                    <div class="dropdown-menu">
                                      <a class="dropdown-item" th:href="@{/updateStatus(status=1,uuid=${session.user.uuid})}">在线</a>
                                      <a class="dropdown-item" th:href="@{/updateStatus(status=2,uuid=${session.user.uuid})}">繁忙</a>
                                      <a class="dropdown-item" th:href="@{/updateStatus(status=3,uuid=${session.user.uuid})}">离线</a>
                                    </div>
                                </div>
                            </div>
                            <!-- End profile user -->

                            <!-- 用户信息描述-开始 -->
                            <div class="p-4 user-profile-desc" data-simplebar>
        
                                <div id="profile-setting-accordion" class="custom-accordion">
                                    <div class="card shadow-none border mb-2">
                                        <a href="#profile-setting-personalinfocollapse" class="text-dark" data-toggle="collapse"
                                                        aria-expanded="true"
                                                        aria-controls="profile-setting-personalinfocollapse">
                                            <div class="card-header" id="profile-setting-personalinfoheading">
                                                <h5 class="font-size-14 m-0">
                                                    个人信息
                                                    <i class="mdi mdi-chevron-up float-right accor-plus-icon"></i>
                                                </h5>
                                            </div>
                                        </a>

                                        <div id="profile-setting-personalinfocollapse" class="collapse show"
                                                aria-labelledby="profile-setting-personalinfoheading" data-parent="#profile-setting-accordion">
                                            <div class="card-body">

                                                <!-- 当用户点击编辑按钮时允许修改信息 -->
                                                <div class="float-right">
                                                    <button type="button" 
                                                    class="btn btn-light btn-sm" data-toggle="modal" data-target="#updateModal">
                                                    <i class="ri-edit-fill mr-1 align-middle"></i> 编辑</button>
                                                </div>

                                                <div>
                                                    <p class="text-muted mb-1">昵称</p>
                                                    <h5 class="font-size-14" th:text="${session.user.nickname}"></h5>
                                                </div>

                                                <div class="mt-4">
                                                    <p class="text-muted mb-1">邮箱</p>
                                                    <h5 class="font-size-14" th:text="${session.user.email}"></h5>
                                                </div>

                                                <div class="mt-4">
                                                    <p class="text-muted mb-1">居住地</p>
                                                    <h5 class="font-size-14 mb-0" th:text="${session.user.address}"></h5>
                                                </div>

                                                <div class="mt-4">
                                                    <p class="text-muted mb-1">个人简介</p>
                                                    <h5 class="font-size-14 mb-0" th:text="${session.user.desc}"></h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                   
                                    <!-- end profile card -->
                                    <!-- 隐私窗口开始 -->
                                    <div class="card shadow-none border mb-2">
                                        <a href="#profile-setting-privacycollapse" class="text-dark collapsed" data-toggle="collapse"
                                                        aria-expanded="false"
                                                        aria-controls="profile-setting-privacycollapse">
                                            <div class="card-header" id="profile-setting-privacyheading">
                                                <h5 class="font-size-14 m-0">
                                                    隐私
                                                    <i class="mdi mdi-chevron-up float-right accor-plus-icon"></i>
                                                </h5>
                                            </div>
                                        </a>
                                        <div id="profile-setting-privacycollapse" class="collapse" aria-labelledby="profile-setting-privacyheading"
                                                data-parent="#profile-setting-accordion">
                                            <div class="card-body">
                                                <div class="py-3">
                                                    <div class="media align-items-center">
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="font-size-13 mb-0 text-truncate">允许查看我的资料</h5>

                                                        </div>
                                                        <div class="dropdown ml-2">
                                                            <button class="btn btn-light btn-sm dropdown-toggle w-sm" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                所有人 <i class="mdi mdi-chevron-down"></i>
                                                            </button>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <a class="dropdown-item" href="#">所有人</a>
                                                                <a class="dropdown-item" href="#">部分人</a>
                                                                <a class="dropdown-item" href="#">仅自己可见</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="py-3 border-top">
                                                    <div class="media align-items-center">
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="font-size-13 mb-0 text-truncate">最近一次登录</h5>

                                                        </div>
                                                        <div class="ml-2">
                                                            <div class="custom-control custom-switch">
                                                                <input type="checkbox" class="custom-control-input" id="privacy-lastseenSwitch" checked>
                                                                <label class="custom-control-label" for="privacy-lastseenSwitch"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="py-3 border-top">
                                                    <div class="media align-items-center">
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="font-size-13 mb-0 text-truncate">我的状态</h5>

                                                        </div>
                                                        <div class="dropdown ml-2">
                                                            <button class="btn btn-light btn-sm dropdown-toggle w-sm" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                所有人 <i class="mdi mdi-chevron-down"></i>
                                                            </button>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <a class="dropdown-item" href="#">所有人</a>
                                                                <a class="dropdown-item" href="#">部分人</a>
                                                                <a class="dropdown-item" href="#">仅自己可见</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>    
                                            </div>
                        
                                        </div>
                                    </div>
                                    <!-- 隐私窗口结束 -->

                                    <div class="card shadow-none border mb-2">
                                        <a href="#profile-setting-securitynoticollapse" class="text-dark collapsed" data-toggle="collapse"
                                                        aria-expanded="false"
                                                        aria-controls="profile-setting-securitynoticollapse">
                                            <div class="card-header" id="profile-setting-securitynotiheading">
                                                <h5 class="font-size-14 m-0">
                                                    安全
                                                    <i class="mdi mdi-chevron-up float-right accor-plus-icon"></i>
                                                </h5>
                                            </div>
                                        </a>
                                        <div id="profile-setting-securitynoticollapse" class="collapse" aria-labelledby="profile-setting-securitynotiheading"
                                                data-parent="#profile-setting-accordion">
                                            <div class="card-body">
                        
                                                <div>
                                                    <div class="media align-items-center">
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="font-size-13 mb-0 text-truncate">显示安全通知</h5>

                                                        </div>
                                                        <div class="ml-2">
                                                            <div class="custom-control custom-switch">
                                                                <input type="checkbox" class="custom-control-input" id="security-notificationswitch">
                                                                <label class="custom-control-label" for="security-notificationswitch"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end Security card -->

                                    <div class="card shadow-none border mb-2">
                                        <a href="#profile-setting-helpcollapse" class="text-dark collapsed" data-toggle="collapse"
                                                        aria-expanded="false"
                                                        aria-controls="profile-setting-helpcollapse">
                                            <div class="card-header" id="profile-setting-helpheading">
                                                <h5 class="font-size-14 m-0">
                                                    帮助
                                                    <i class="mdi mdi-chevron-up float-right accor-plus-icon"></i>
                                                </h5>
                                            </div>
                                        </a>
                                        <div id="profile-setting-helpcollapse" class="collapse" aria-labelledby="profile-setting-helpheading"
                                                data-parent="#profile-setting-accordion">
                                            <div class="card-body">
                        
                                                <div>
                                                    <div class="py-3">
                                                        <h5 class="font-size-13 mb-0"><a href="#" class="text-body d-block">常见问题</a></h5>
                                                    </div>
                                                    <div class="py-3 border-top">
                                                        <h5 class="font-size-13 mb-0"><a href="#" class="text-body d-block">在线咨询</a></h5>
                                                    </div>
                                                    <div class="py-3 border-top">
                                                        <h5 class="font-size-13 mb-0"><a href="#" class="text-body d-block">关于合作</a></h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end Help card -->
                                </div>
                                <!-- end profile-setting-accordion -->
                            </div>
                            <!-- 用户信息描述-结束 -->
                            
                        </div>
                        <!-- Start Settings content -->
                    </div>
                    <!-- 设置按钮点击结束 -->
                </div>
                <!-- 按钮内容结束 -->
            </div>
            <!-- 聊天侧边栏结束 -->

            <!-- 聊天窗口开始 -->
            <div class="user-chat w-100">
                <div class="d-lg-flex">

                    <!-- start chat conversation section -->
                    <div class="w-100">

                        <!-- start chat user head -->
                        <div class="p-3 p-lg-4 border-bottom">
                            <div class="row align-items-center">
                                <div class="col-sm-4 col-8">
                                    <div class="media align-items-center">
                                        <div class="d-block d-lg-none mr-2">
                                            <a href="javascript: void(0);" class="user-chat-remove text-muted font-size-16 p-2"><i class="ri-arrow-left-s-line"></i></a>
                                        </div>
                                        <!-- 对方头像 -->
                                        <div class="mr-3">
                                            <img src="/image/default.jpeg" class="rounded-circle avatar-xs tfuserAvatar" alt="还没有和任何人聊天哦" >
                                        </div>
                                        <div class="media-body overflow-hidden">
                                            <h5 class="font-size-16 mb-0 text-truncate"><a href="#" class="text-reset user-profile-show tfnickname" >点击联系人开始聊天哦~</a>
                                                <!-- 在线状态 -->
                                                <i class="ri-record-circle-fill font-size-10 text-success d-inline-block ml-1 line-icon" ></i>
                                            </h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-8 col-4">
                                    <ul class="list-inline user-chat-nav text-right mb-0">
                                        
                                        <li class="list-inline-item">
                                            <div class="dropdown">
                                                <button class="btn nav-btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="ri-search-line"></i>
                                                </button>
                                                <div class="dropdown-menu p-0 dropdown-menu-right dropdown-menu-md">
                                                    <div class="search-box p-2">
                                                        <input type="text" class="form-control bg-light border-0" placeholder="搜索..">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
    
                                        <li class="list-inline-item d-none d-lg-inline-block">
                                            <button type="button" class="btn nav-btn user-profile-show">
                                                <i class="ri-user-2-line"></i>
                                            </button>
                                        </li>
    
                                        <li class="list-inline-item">
                                            <div class="dropdown">
                                                <button class="btn nav-btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="ri-more-fill"></i>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item d-block d-lg-none user-profile-show" href="#">查看信息 <i class="ri-user-2-line float-right text-muted"></i></a>
                                                    <a class="dropdown-item" href="#">静音 <i class="ri-volume-mute-line float-right text-muted"></i></a>
                                                    <a class="dropdown-item" href="#">删除 <i class="ri-delete-bin-line float-right text-muted"></i></a>
                                                </div>
                                            </div>
                                        </li>
                                        
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- end chat user head -->
    
                        <!-- 聊天主体信息展示-开始 -->
                        <div class="chat-conversation p-3 p-lg-4" data-simplebar="init">
                            <ul class="list-unstyled mb-0" id="chat-content">
                                
                            </ul>
                        </div>
                        <!-- 聊天主体信息展示-结束 -->


                        <!-- emoji内容 -->
                        <div class="faceDivBox" style="width:800px;height:580px;display:none;position: absolute;bottom: 80px;">
                            <div class="faceDiv" style="height:580px;">
                                <section class="emoji-box"></section>
                                <div class="tabbox">
                                   <section class="emoji-tab"></section>
                                </div>
                            </div>
                            <a href="javascript:void(0);" class="closeFaceBox">x</a>
                        </div>


                        <!-- 下方输入框 -->
                        <div class="p-3 p-lg-4 border-top mb-0">
                            
                            <div class="row no-gutters">
                                <div class="col">
                                    <div>
                                        <input type="text" 
                                        class="form-control form-control-lg bg-light border-light"
                                        id="editor-input" placeholder="点击联系人解锁输入框哦~" disabled />
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <div class="chat-input-links ml-md-2">
                                        <ul class="list-inline mb-0">
                                            <li class="list-inline-item"> 
                                                <!-- emoji头像按钮 -->
                                                <button type="button" id="openFace" 
                                                style="position: relative;vertical-align: 1px;left: 2px;"
                                                class="btn btn-link text-decoration-none font-size-16 btn-lg waves-effect" data-toggle="tooltip" data-placement="top" title="表情">
                                                    <i class="ri-emotion-happy-line" ></i>
                                                </button>
                                            </li>
                                            <li class="list-inline-item">  
                                                <button type="button" class="btn btn-link text-decoration-none font-size-16 btn-lg waves-effect" data-toggle="tooltip" data-placement="top" title="附件">
                                                    <!-- 发送文件 -->
                                                    <i class="ri-attachment-line"></i>
                                                </button>
                                            </li>
                                            <li class="list-inline-item">
                                                <button type="submit" class="btn btn-primary font-size-16 btn-lg chat-send waves-effect waves-light" disabled id="submit-btn">
                                                    <!-- 发送按钮 -->
                                                    <i class="ri-send-plane-2-fill"></i>
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        <!-- end chat input section -->
                    </div>
                    <!-- end chat conversation section -->
    
                    <!-- 对方所有信息简介 -->
                    <div class="user-profile-sidebar">
                        <div class="px-3 px-lg-4 pt-3 pt-lg-4">
                            <div class="user-chat-nav text-right">
                                <button type="button" class="btn nav-btn" id="user-profile-hide">
                                    <i class="ri-close-line"></i>
                                </button>
                            </div>
                        </div>

                        <div class="text-center p-4 border-bottom">
                            <div class="mb-4">
                                <!-- 对方头像 -->
                                <img src="/image/default.jpeg" class="rounded-circle avatar-lg img-thumbnail tfuserAvatar" alt="">
                            </div>

                            <h5 class="font-size-16 mb-1 text-truncate tfnickname"></h5>
                            <p class="text-muted text-truncate mb-1 isOnline" ><i class="ri-record-circle-fill font-size-10 text-success mr-1"></i></p>
                        </div>
                        <!-- End profile user -->

                        <!-- 对方信息描述 -->
                        <div class="p-4 user-profile-desc" data-simplebar>
                            <div class="text-muted">
                                <!-- 个人简介 -->
                                <p class="mb-4 tfdesc"></p>
                            </div>

                            <div id="profile-user-accordion" class="custom-accordion">
                                <div class="card shadow-none border mb-2">
                                    <a href="#collapseOne" class="text-dark" data-toggle="collapse"
                                                    aria-expanded="true"
                                                    aria-controls="collapseOne">
                                        <div class="card-header" id="headingOne">
                                            <h5 class="font-size-14 m-0">
                                                <i class="ri-user-2-line mr-2 align-middle d-inline-block"></i> 关于
                                                <i class="mdi mdi-chevron-up float-right accor-plus-icon"></i>
                                            </h5>
                                        </div>
                                    </a>

                                    <div id="collapseOne" class="collapse show"
                                            aria-labelledby="headingOne" data-parent="#profile-user-accordion">
                                        <div class="card-body">
                                            <!-- 当前聊天人的所有信息 -->
                                            <div>
                                                <p class="text-muted mb-1">昵称</p>
                                                <h5 class="font-size-14 tfnickname">无</h5>
                                            </div>

                                            <div class="mt-4">
                                                <p class="text-muted mb-1">邮箱</p>
                                                <h5 class="font-size-14 tfemail">无</h5>
                                            </div>

                                            <div class="mt-4">
                                                <p class="text-muted mb-1">上次登录时间</p>
                                                <h5 class="font-size-14 tfdate">无</h5>
                                            </div>

                                            <div class="mt-4">
                                                <p class="text-muted mb-1">居住地</p>
                                                <h5 class="font-size-14 mb-0 tfaddress">无</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- End About card -->

                            </div>
                            <!-- end profile-user-accordion -->
                        </div>
                        <!-- end user-profile-desc -->
                    </div>
                    <!-- end User profile detail sidebar -->
                </div>
            </div>
            <!-- 聊天窗口结束-->

             <!-- 用户修改信息模态框 -->
             <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModelTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title font-size-16" id="updateModelTitle">修改您的信息</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body p-4">
                            <!-- 书写请求 -->
                            <form method="post" action="/update-my-data" name="updateForm" id="updateForm">
                                <input type="hidden" name="uuid" id="uuid" th:value="${session.user.uuid}">
                                <div class="form-group mb-4">
                                    <label for="update-nickname-input">昵称</label>
                                    <input type="text" class="form-control" id="update-nickname-input" name="nickname" placeholder="输入您的昵称" th:value="${session.user.nickname}">
                                </div>
                                <div class="form-group mb-4">
                                    <label for="update-email-input">邮箱</label>
                                    <input type="email" class="form-control" id="update-email-input" name="email" placeholder="输入您的邮箱" th:value="${session.user.email}">
                                </div>
                                <div class="form-group mb-4">
                                    <label for="update-address-select">居住地</label>
                                    <select name="address" id="update-address-select" class="form-control" th:value="${session.user.address}">
                                        <option value="北京市" th:selected="${session.user.address=='北京市'}">北京市</option>
                                        <option value="天津市" th:selected="${session.user.address=='天津市'}">天津市</option>
                                        <option value="上海市" th:selected="${session.user.address=='上海市'}">上海市</option>
                                        <option value="重庆市" th:selected="${session.user.address=='重庆市'}">重庆市</option>
                                        <option value="河北省" th:selected="${session.user.address=='河北省'}">河北省</option>
                                        <option value="河南省" th:selected="${session.user.address=='河南省'}">河南省</option>
                                        <option value="云南省" th:selected="${session.user.address=='云南省'}">云南省</option>
                                        <option value="辽宁省" th:selected="${session.user.address=='辽宁省'}">辽宁省</option>
                                        <option value="黑龙江省" th:selected="${session.user.address=='黑龙江省'}">黑龙江省</option>
                                        <option value="湖南省" th:selected="${session.user.address=='湖南省'}">湖南省</option>
                                        <option value="安徽省" th:selected="${session.user.address=='安徽省'}">安徽省</option>
                                        <option value="山东省" th:selected="${session.user.address=='山东省'}">山东省</option>
                                        <option value="新疆维吾尔自治区" th:selected="${session.user.address=='新疆维吾尔自治区'}">新疆维吾尔自治区</option>
                                        <option value="江苏省" th:selected="${session.user.address=='江苏省'}">江苏省</option>
                                        <option value="浙江省" th:selected="${session.user.address=='浙江省'}">浙江省</option>
                                        <option value="江西省" th:selected="${session.user.address=='江西省'}">江西省</option>
                                        <option value="湖北省" th:selected="${session.user.address=='湖北省'}">湖北省</option>
                                        <option value="广西壮族自治区" th:selected="${session.user.address=='广西壮族自治区'}">广西壮族自治区</option>
                                        <option value="甘肃省" th:selected="${session.user.address=='甘肃省'}">甘肃省</option>
                                        <option value="山西省" th:selected="${session.user.address=='山西省'}">山西省</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label for="update-desc-textarea">个人简介</label>
                                    <textarea class="form-control" id="update-desc-textarea" name="desc" rows="3" placeholder="此人很懒，什么信息也没有..." th:text="${session.user.desc}"></textarea>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-link" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="update-personal-data-btn">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="visibility: hidden">
            <!-- JAVASCRIPT -->
            <script src="assets/libs/jquery/jquery.min.js"></script>
            <script src="assets/libs/bootstrap/bootstrap.bundle.min.js"></script>
            <script src="assets/libs/simplebar/simplebar.min.js"></script>
            <script src="assets/libs/node-waves/waves.min.js"></script>
            <!-- Magnific Popup-->
            <script src="assets/libs/magnific-popup/jquery.magnific-popup.min.js"></script>
            <!-- owl.carousel js -->
            <script src="assets/libs/owl.carousel/owl.carousel.min.js"></script>
            <!-- page init -->
            <script src="assets/js/pages/index.init.js"></script>
            <script src="assets/js/app.js"></script>
            <!-- emoij.js -->
            <script src="assets/js/emojisort.js"></script>
            <script src="assets/js/emoji.js"></script>
            <!-- layer组件 -->
            <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.min.js"></script>
        </div>

    </body>
</html>
<!--页面初始化-->
<script>
    window.onload = function(){
        //获取所有好友
        $.ajax({
            url:'/getAllFriend',
            type:'get',
            data:{uuid:$("#uuid").val()},
            success:function(result){
                result = JSON.parse(result);
                console.log(result);
            }
        });
        $(document).keydown(function(e){
            if(e.keyCode===13){
                $("#submit-btn").trigger("click");
            }
        })

    }
</script>
<!-- 建立websocket连接 -->
<script type="text/javascript" th:inline="javascript">
    var uuid = [[${session.user.uuid}]];
    var websocket = new WebSocket("ws://localhost:8081/chat");
    //当建立起连接时要做的事情
    websocket.onopen = function(){

    }
    //当收到服务器发送来的消息时要做的事情
    websocket.onmessage = function(res){
        var obj = JSON.parse(res.data);
        //说明是好友请求
        if(obj.type){
            //好友申请
            if(obj.type==1){
                layer.confirm(obj.addMsg, {icon: 3, title:'好友请求',btn:['同意','拒绝']}, function(){
                    layer.msg('您已同意',{icon:1},function(res){
                        $.get("/getAllFriend?uuid="+[[${session.user.uuid}]],function(res){
                            location.reload();
                        });
                    });
                    var addreq = {
                        type:2,
                        addEmail:[[${session.user.email}]]+","+obj.addEmail,
                        addMsg:"同意了您的好友申请",
                    }
                    websocket.send(JSON.stringify(addreq));
                },function(index){
                    var addreq = {
                        type:2,
                        addEmail:[[${session.user.email}]]+","+obj.addEmail,
                        addMsg:"拒绝了您的好友申请",
                    };
                    websocket.send(JSON.stringify(addreq));
                    layer.msg('您已拒绝',{icon:2});
                    layer.close(index);
                });
            }else if(obj.type==2){
            //    好友申请回复结果
                layer.alert("<span style='color:blue;'>"+obj.addEmail+"</span>"+obj.addMsg,{icon:0,title:'好友申请结果'},function(){
                    $.get("/getAllFriend?uuid="+[[${session.user.uuid}]],function(res){
                        location.reload();
                    });
                })
            }
            return;
        }
        //只有当前聊天窗口不存在才会创建新元素
        if($("#"+obj.fromUUID+"").length<=0){
            $("<li class='active' id='"+obj.fromUUID+"'>\n" +
                "        <a href=\"#\">\n" +
                "            <div class=\"media\">\n" +
                "        <div class=\"chat-user-img align-self-center mr-3\">\n" +
                "            <img src=\""+obj.userAvatar+"\" class=\"rounded-circle avatar-xs\" alt=\"\">\n" +
                "            <span class=\"user-status\"></span>\n" +
                "            </div>\n" +
                "\n" +
                "            <div class=\"media-body overflow-hidden\">\n" +
                "            <h5 class=\"text-truncate font-size-15 mb-1\">"+obj.nickname+"</h5>\n" +
                "            <p class=\"chat-user-message text-truncate mb-0 tips-p\">"+obj.message+"</p>\n" +
                "        </div>\n" +
                "        <div class=\"font-size-11\" id='date-show-div'>"+new Date().toLocaleTimeString()+"</div>\n" +
                "        </div>\n" +
                "        </a>\n" +
                "        </li>").appendTo(".chat-user-list").siblings("li").removeClass("active");

            if(obj.status==1)$("#"+obj.fromUUID+"").find(".chat-user-img").removeClass("away offline").addClass("online");
            if(obj.status==2)$("#"+obj.fromUUID+"").find(".chat-user-img").removeClass("online offline").addClass("away");
            if(obj.status==3)$("#"+obj.fromUUID+"").find(".chat-user-img").removeClass("away online").addClass("offline");
        //    表明当前自己要和那个人进行通信
            $.get("/getCurrentTalkingUser?uuid="+obj.fromUUID);

            $("#editor-input").prop("disabled",false).attr("placeholder","输入消息...");

            $("#submit-btn").prop("disabled",false);

            setTimeout(function(){
                $.ajax({
                    url:'/findFriendByUUID',
                    type:'get',
                    async:false,
                    data:{uuid:obj.fromUUID},
                    success:function(result){
                        result = JSON.parse(result);
                        $(".tfuserAvatar").attr("src",result.userAvatar);
                        $(".tfnickname").text(result.nickname);
                        $(".tfdesc").text(result.desc);
                        $(".tfaddress").text(result.address);
                        $(".tfemail").text(result.email);
                        $(".tfdate").text(result.lastLoginTime);
                        if(result.status==1)$(".isOnline").html("<i class=\"ri-record-circle-fill font-size-10 text-success mr-1\"></i>在线");
                        if(result.status==2)$(".isOnline").html("<i class=\"ri-record-circle-fill font-size-10 text-warning mr-1\"></i>繁忙");
                        if(result.status==3)$(".isOnline").html("<i class=\"ri-record-circle-fill font-size-10 text-danger mr-1\"></i>离线");
                        if(result.status==1)$(".line-icon").removeClass("text-warning text-danger").addClass("text-success");
                        if(result.status==2)$(".line-icon").removeClass("text-danger text-success").addClass("text-warning");
                        if(result.status==3)$(".line-icon").removeClass("text-warning text-success").addClass("text-danger");
                    }
                });
            },500);
        }
        $(" <li class=\"right\">\n" +
            "                                    <div class=\"conversation-list\">\n" +
            "                                        <div class=\"chat-avatar\">\n" +
            "                                            <img src=\""+obj.userAvatar+"\" alt=\"\">\n" +
            "                                        </div>\n" +
            "    \n" +
            "                                        <div class=\"user-chat-content\">\n" +
            "                                            <div class=\"ctext-wrap\">\n" +
            "                                                <div class=\"ctext-wrap-content\">\n" +
            "                                                    <p class=\"mb-0\">\n" +
            "                                                        "+obj.message+"\n" +
            "                                                    </p>\n" +
            "                                                    <p class=\"chat-time mb-0\"><i class=\"ri-time-line align-middle\"></i> <span class=\"align-middle\">"+new Date().toLocaleTimeString()+"</span></p>\n" +
            "                                                </div>\n" +
            "                                                <div class=\"dropdown align-self-start\">\n" +
            "                                                    <a class=\"dropdown-toggle\" href=\"#\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n" +
            "                                                        <i class=\"ri-more-2-fill\"></i>\n" +
            "                                                    </a>\n" +
            "                                                    <div class=\"dropdown-menu\">\n" +
            "                                                        <a class=\"dropdown-item\" href=\"#\">Copy <i class=\"ri-file-copy-line float-right text-muted\"></i></a>\n" +
            "                                                        <a class=\"dropdown-item\" href=\"#\">Save <i class=\"ri-save-line float-right text-muted\"></i></a>\n" +
            "                                                        <a class=\"dropdown-item\" href=\"#\">Delete <i class=\"ri-delete-bin-line float-right text-muted\"></i></a>\n" +
            "                                                    </div>\n" +
            "                                                </div>\n" +
            "                                            </div>\n" +
            "    \n" +
            "                                            <div class=\"conversation-name\">"+obj.nickname+"</div>\n" +
            "                                        </div>\n" +
            "                                        \n" +
            "                                    </div>\n" +
            "                                </li>").appendTo("#chat-content");

        $("#"+obj.fromUUID+"").find(".tips-p").text(obj.message);


    }
    //当websocket断开时做的事情【任意一方断开连接】
    websocket.onclose = function(){
        websocket=null;
    }
    //当发生错误时要做的事情
    websocket.onerror = function(){

    }

    $("#addfriend-btn").click(function(){
        if($("#addcontactemail-input").val()==''){
            layer.msg("邮箱信息不能为空");
            return;
        }
        if($("#addcontact-invitemessage-input").val()==''){
            layer.msg("验证信息不能为空");
            return;
        }
        $.get("/findUUIDByEmail?email="+$("#addcontactemail-input").val(),{async:false},function(result){
            if(result==='no'){
                layer.msg("用户不存在")
                return;
            }else{
                var addreq = {
                    type:0,
                    addEmail:$("#addcontactemail-input").val(),
                    addMsg:$("#addcontact-invitemessage-input").val()
                }
                websocket.send(JSON.stringify(addreq));
                layer.msg("好友请求已发送",{icon:1,closeBtn:1,time:1000},function(){
                    $("#addcontactemail-input").val("");
                    $("#addcontact-invitemessage-input").val("");
                    $("#addContact-exampleModal").modal("hide");
                });
            }
        })
    })

    $("#submit-btn").click(function(){
        var content = $("#editor-input").val();
        if (content==''){
            layer.alert("信息不能为空",{icon:2});
            return;
        }
        websocket.send(content);

        $("<li>\n" +
            "        <div class=\"conversation-list\">\n" +
            "    <div class=\"chat-avatar\">\n" +
            "            <img src=\""+[[${session.user.userAvatar}]]+"\" alt=\"\">\n" +
            "            </div>\n" +
            "    <div class=\"user-chat-content\">\n" +
            "            <div class=\"ctext-wrap\">\n" +
            "            <div class=\"ctext-wrap-content\">\n" +
            "            <p class=\"mb-0\">" + content + "</p>\n" +
            "        <p class=\"chat-time mb-0\"><i class=\"ri-time-line align-middle\"></i> <span class=\"align-middle\">"+new Date().toLocaleTimeString()+"</span></p>\n" +
            "        </div>\n" +
            "        <div class=\"dropdown align-self-start\">\n" +
            "            <a class=\"dropdown-toggle\" href=\"#\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n" +
            "            <i class=\"ri-more-2-fill\"></i>\n" +
            "            </a>\n" +
            "            <div class=\"dropdown-menu\">\n" +
            "            <a class=\"dropdown-item\" href=\"#\">复制 <i class=\"ri-file-copy-line float-right text-muted\"></i></a>\n" +
            "        <a class=\"dropdown-item\" href=\"#\">保存 <i class=\"ri-save-line float-right text-muted\"></i></a>\n" +
            "        <a class=\"dropdown-item\" href=\"#\">删除 <i class=\"ri-delete-bin-line float-right text-muted\"></i></a>\n" +
            "        </div>\n" +
            "        </div>\n" +
            "        </div>\n" +
            "    <div class=\"conversation-name\">"+[[${session.user.nickname}]]+"</div>\n" +
            "            </div>\n" +
            "            </div>\n" +
            "            </li>").appendTo("#chat-content");
        $("#data-show-div").text(new Date().toLocaleTimeString());
        $(".chat-user-list li.active").find(".tips-p").text(content);
        $("#editor-input").val("");
    })

</script>
<script>
    //emoji初始化
    $(document).ready(function() {
        //表情实例化
        sdEditorEmoj.Init(emojiconfig);
        //type:容器类型(支持input，div等容器,textarea请用input类型）
        //id:容器ID
        sdEditorEmoj.setEmoji({
            type: 'input',
            id: "editor-input"
        });

});
    $("#update-personal-data-btn").on("click",function(){
        $.ajax({
            url:'/update-my-data',
            type:'post',
            data:{
                uuid:$("#uuid").val(),
                nickname:$("#update-nickname-input").val(),
                email:$("#update-email-input").val(),
                address:$("#update-address-select").val(),
                desc:$("#update-desc-textarea").val(),
            },
            success:function(result){
                result = JSON.parse(result);
                if(result.status=="success"){
                    $("#updateModal").modal("hide");
                    layer.alert("修改成功！",{icon:1},function(){
                        window.location.reload();
                    });
                }
            }
        })
    });
    $("#upload-img-btn").click(function(){
        $("#uploadImg").trigger("click");
    })
    //上传头像图片
    function postImgData(){
        var formData = new FormData();
        formData.append("file",$("#uploadImg")[0].files[0]);
        $.ajax({
            url:'/uploadImg',
            type:'post',
            data:formData,
            processData:false,//告诉jQuery不要去处理发送的数据
            contentType:false,//告诉jQuery不要去设置Content-Type请求头,完全以二进制数据发送
            success:function (result) {
                var obj = JSON.parse(result);
                if(obj.errorMsg!=undefined){
                    layer.msg("文件请不要大于2MB",{icon:2});
                }else{
                    var imgUrl = obj.imgUrl;
                    $(".userImg").attr("src",imgUrl);
                    layer.msg('上传成功！',{icon:1});
                }
            }
        })
    }
//    点击联系人创建聊天窗口
    $(".contact-list").on("click","li",function(){
        //页面效果展示
        $("#pills-chat").addClass("fade show active");
        $("#pills-chat-tab").addClass("active");
        $("#pills-contacts").removeClass("fade show active");
        $("#pills-contacts-tab").removeClass("active");
        //获取点击好友的基本信息
        var fuuid = $(this).children("#fuuid").val();
        $.ajax({
            url:'/getCurrentTalkingUser',
            type:'get',
            data:{uuid:fuuid},
            success:function(res){
                console.log(res);
            }
        });
    //    创建好友窗口
        $("<li class='active' id='"+fuuid+"'>\n" +
            "<input type='hidden' id='tftuuid' value='"+fuuid+"' />"+
            "        <a href=\"#\">\n" +
            "            <div class=\"media\">\n" +
            "        <div class=\"chat-user-img align-self-center mr-3\">\n" +
            "            <img src=\"\" class=\"rounded-circle avatar-xs tfuserAvatar\" alt=\"\">\n" +
            "            <span class=\"user-status\"></span>\n" +
            "            </div>\n" +
            "\n" +
            "            <div class=\"media-body overflow-hidden\">\n" +
            "            <h5 class=\"text-truncate font-size-15 mb-1 tfnickname\"></h5>\n" +
            "            <p class=\"chat-user-message text-truncate mb-0 tips-p\"></p>\n" +
            "        </div>\n" +
            "        <div class=\"font-size-11\" id='date-show-div'>"+new Date().toLocaleTimeString()+"</div>\n" +
            "        </div>\n" +
            "        </a>\n" +
            "        </li>").appendTo(".chat-user-list").siblings("li").removeClass("active");

        $.get("/findFriendByUUID?uuid="+fuuid,{async:false},function(res){
            res = JSON.parse(res);
            //    填补对应的好友信息
            $(".tfuserAvatar").attr("src",res.userAvatar);
            $(".tfnickname").text(res.nickname);
            $(".tfdate").text(res.lastLoginTime);
            $(".tfdesc").text(res.desc);
            $(".tfaddress").text(res.address);
            $(".tfemail").text(res.email);
            if(res.status==1)$("#"+fuuid+"").find(".chat-user-img").removeClass("away offline").addClass("online");
            if(res.status==2)$("#"+fuuid+"").find(".chat-user-img").removeClass("online offline").addClass("away");
            if(res.status==3)$("#"+fuuid+"").find(".chat-user-img").removeClass("away online").addClass("offline");
            if(res.status==1)$(".isOnline").html("<i class=\"ri-record-circle-fill font-size-10 text-success mr-1\"></i>在线");
            if(res.status==2)$(".isOnline").html("<i class=\"ri-record-circle-fill font-size-10 text-warning mr-1\"></i>繁忙");
            if(res.status==3)$(".isOnline").html("<i class=\"ri-record-circle-fill font-size-10 text-danger mr-1\"></i>离线");
            if(res.status==1)$(".line-icon").removeClass("text-warning text-danger").addClass("text-success");
            if(res.status==2)$(".line-icon").removeClass("text-danger text-success").addClass("text-warning");
            if(res.status==3)$(".line-icon").removeClass("text-warning text-success").addClass("text-danger");
        })


        $("#editor-input").prop("disabled",false).attr("placeholder","输入消息...");

        $("#submit-btn").prop("disabled",false);

    //    删除聊天内容
        $("#chat-content").empty();

    });

    $(".chat-user-list").on("click","li",function(){
        $(this).addClass("active").siblings("li").removeClass("active");
        var fuuid = $(this).children("#tftuuid").val();
        $.ajax({
            url:'/getCurrentTalkingUser',
            type:'get',
            data:{uuid:fuuid},
            success:function(res){
                console.log(res);
            }
        });

        $.get("/findFriendByUUID?uuid="+fuuid,{async:false},function(res){
            res = JSON.parse(res);
            //    填补对应的好友信息
            $(".tfuserAvatar").attr("src",res.userAvatar);
            $(".tfnickname").text(res.nickname);
            $(".tfdate").text(res.lastLoginTime);
            $(".tfdesc").text(res.desc);
            $(".tfaddress").text(res.address);
            $(".tfemail").text(res.email);
            if(res.status==1)$("#"+fuuid+"").find(".chat-user-img").removeClass("away offline").addClass("online");
            if(res.status==2)$("#"+fuuid+"").find(".chat-user-img").removeClass("online offline").addClass("away");
            if(res.status==3)$("#"+fuuid+"").find(".chat-user-img").removeClass("away online").addClass("offline");
            if(res.status==1)$(".isOnline").html("<i class=\"ri-record-circle-fill font-size-10 text-success mr-1\"></i>在线");
            if(res.status==2)$(".isOnline").html("<i class=\"ri-record-circle-fill font-size-10 text-warning mr-1\"></i>繁忙");
            if(res.status==3)$(".isOnline").html("<i class=\"ri-record-circle-fill font-size-10 text-danger mr-1\"></i>离线");
            if(res.status==1)$(".line-icon").removeClass("text-warning text-danger").addClass("text-success");
            if(res.status==2)$(".line-icon").removeClass("text-danger text-success").addClass("text-warning");
            if(res.status==3)$(".line-icon").removeClass("text-warning text-success").addClass("text-danger");
        })
        });
        //    删除聊天内容
        $("#chat-content").empty();

    //发送消息

</script>

